<!-- 父组件 -->
<template>
    <div class="back">我是父组件：
        <h3>姓名：{{ res.name }}</h3>
    
    </div>
    
    <Children />
</template>

<script lang="ts">
import { reactive, ref, onMounted } from 'vue';
import Children from './Children.vue'
import { useStore } from 'vuex'
import { computed } from 'vue'

export default {
    name: 'Parent',
    components: {
        Children
    },
    // vue2 是在这个做个绑定，组件件用props: {}接收
    // props: {}
    setup() {
        // #region
        const p1 = reactive({ name: '马云', age: 50 })
        // vue3 另外一种方法：页面刷新就转
        // name 子组件识别用, 传
        // provide('name', p1)

        const val = ref()

        // function btn() {
        //     // console.log('点击，父组件传值给子组件')
        //     // receive 子组件的方法
        //     val.value.receive(p1)

        // }
        //#endregion

        
        // 从vuex数据仓库里取数据
        const store = useStore()
        const res = computed(() => {
            console.log(store.state.name)
            return store.state.name
        })

        onMounted(() => {
            console.log('父组件挂载')
        })

        


        return { res}
    }
}
</script>

<!-- <style scoped> 父组件写scoped颜色会重叠, 父组件会覆盖子组件颜色，vue3父组件不需要写scoped -->
<style>
.back {
    background-color: darkkhaki;
    /* 上下20px 左右0 */
    padding: 20px 0;
}
</style>